<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>鼠标点击Div区域外隐藏Div</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</head>
	<style>
		body {
			background: black;
		}
		
		#demo {
			background: #fff;
			width: 250px;
			height: 250px;
			display: none;
		}
	</style>
	<div id="demo">
		<p>This is a div.</p>
		<p>This is a demo.</p>
		<p><input type="text" /><br />
			<select>
				<option>Test</option>
			</select>
		</p>
	</div>
	<input id="btn" type="button" value="显示DIV" />
	
<script type="text/javascript">
$("#btn").click(function (event) {
	$("#demo").fadeIn();
	$(document).one("click", function () {//对document绑定一个影藏Div方法
		$("#demo").hide();
	});
	event.stopPropagation();//点击 www.it165.net Button阻止事件冒泡到document
});
$("#demo").click(function (event) {
	event.stopPropagation();//在Div区域内的点击事件阻止冒泡到document
});
</script>
